<template>
	<view class="mask" @touchmove.stop>
		<!-- <view class="mask-content animated bounceInDown"
			:style="'background-image: url(' + bg + '); background-size: 100% auto; background-repeat: no-repeat;'"
			@tap.stop> -->
		<view class="mask-content animated bounceInDown"
				:style="'background-image: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/static/youhuijuan_bg.png); background-size: 100% auto; background-repeat: no-repeat;'"
				@tap.stop>
			<view class="close-btn" @tap.stop="cancel"></view>
			<!-- <view class="title">转售给朋友</view> -->
			
			<scroll-view class="coupon-list" scroll-y>
				<CouponItem v-for="(item, index) in list" :coupon="item"></CouponItem>
			</scroll-view>
			<view class="btn-c">
				
				
				<view @tap="pickAllCoupon" class="confirm-btn">
					<view class="num-box">
						<view class="num">{{list.length}}</view>
					</view>
				</view>
			
			</view>
		</view>
		
	</view>
</template>

<script>
	import CouponItem from "./CouponItem.vue"
	export default {
		components: {
			CouponItem
		},
		data() {
			return {
				info: {},
				list: []
			}
		},
		props: {
		},
		computed: {
			link () {
				return this.$store.getters.setting.coupon_popup.link
			},
			bg () {
				return this.$store.getters.setting.coupon_popup.bg || 'https://cdn2.hquesoft.com/box/couponPopup/bg.png'
			}
		},
		watch: {
		},
		onLoad(e) {
			
		},
		created() {
			this.$http('/coupon/popup-list').then(res => {
				this.list = res.data.list
			})
		},
		methods: {
			cancel() {
				this.$emit('close')
			},
			pickAllCoupon() {
				uni.showLoading({
					title: '领取中~',
					icon: 'none'
				})
				this.$http('/coupon/pick-popup', 'POST').then(res => {
					let title = '领取成功~'
					
					uni.showToast({
						title: title,
						icon: 'none'
					})
					uni.setStorageSync('coupon_popup', 1)
					uni.hideLoading()
					this.$emit('pickSuccess')
					
					setTimeout(() => {
						this.toLink(this.link)
					}, 1300)
				})
			}
		},
		onPageScroll(e) {}
	}
</script>

<style lang="scss" scoped>
	.small-text {
		// font-size: 80%;
	}

	.mask {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.mask-content {
		// width: 660rpx;
		
		width: 630rpx;
		// height: 900rpx;
		// background: linear-gradient(180deg, #FFC472, #EC6A2C);
		// background-image: url('https://cdn2.hquesoft.com/box/couponPopup/bg.png');
		// background-size: 100% auto;
		// background-repeat: no-repeat;
		// height: 680rpx;
		// background-color: #EDEDED;
		// background-color: white;
		border-radius: 20rpx;
		// border: 1px solid red;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// animation: show 0.8s;
		padding: 60rpx 60rpx 50rpx 60rpx;
		box-sizing: border-box;
		position: relative;
		background-position: 12rpx 0rpx;
		height: 700rpx;
		
		.coupon-list {
			// max-height: 540rpx;
			// margin-top: 230rpx;
			// margin-bottom: 60rpx;
			// border: 1px solid red;
			position: absolute;
			left: 5%;
			bottom: 5%;
			padding: 0rpx 10rpx;
			box-sizing: border-box;
			width: 90%;
		}

		.close-btn {
			position: absolute;
			right: 26rpx;
			top: 145rpx;
			width: 80rpx;
			height: 80rpx;
			background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/static/youhuijuan_close.png);
			background-size: 100%;
		}
		.btn-c{
			position: relative;
			margin-top: 730rpx;
			// width: 90%;
			.num-box{
				position: absolute;
				top: 5rpx;
				left: 24rpx;
				width: 45rpx;
				display: flex;
				height: 45rpx;
				justify-content: center;
				align-items: center;
				.num{
					color: #fff;
					font-family: alimama;
				}
			}
			
			
			.confirm-btn {
				background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/static/youhuijuan_get.png);
				background-repeat: no-repeat;
				background-size: 100%;
				position: absolute;
				bottom: -10rpx;
				left: 25%;
				width: 300rpx;
				height: 150rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
	}
</style>
